<!-- 一期所有样式和js都写入到html中 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover"
    />
    <title>逗学教育</title>
    <link rel="stylesheet" href="../../common/css/vant.css" />
    <link rel="stylesheet" href="../../common/css/common.css" />
    <style>
      /*
			页面的所有css，必须有页面前缀
			如首页，则所有css以 .index- 开头
         */
      .help-hr {
        height: 0.24rem;
        background-color: rgb(220, 220, 220);
      }
      .pay-details {
        margin-top: 0.48rem;
        padding: 0.32rem;
        background-color: #fff;
        border-radius: 0.2rem;
      }
      .pay-details-title {
        font-size: 0.32rem;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
      }
      .pay-details-course-name {
        margin: 0.24rem 0 0 -0.16rem;
        font-size: 0.3rem;
        color: rgba(51, 51, 51, 1);
      }
      .pay-details-product {
        margin-top: 0.24rem;
      }
      .pay-details-money {
        font-size: 0.36rem;
        color: rgba(254, 80, 79, 1);
      }
      .pay-money-icon {
        font-size: 0.4rem;
      }
      .pay-details-nummmm-icon {
        font-size: 0.3rem;
        color: rgba(112, 112, 112, 1);
      }
      .pay-product-num {
        margin-bottom: 0.3rem;
        font-size: 0.26rem;
        color: rgba(102, 102, 102, 1);
      }

      /* 订单备注样式 */
      [class*='van-hairline']::after {
        border: none;
      }
      .pay-order-details {
        margin-top: 0.24rem;
        padding: 0.22rem 0.32rem 0.32rem;
        background-color: #fff;
        border-radius: 0.2rem;
      }
      .van-cell-group {
        width: 4.76rem;
        float: right;
      }
      .van-cell {
        padding: 0;
        line-height: inherit;
      }
      .pay-remarks {
        font-size: 0.28rem;
        color: rgba(51, 51, 51, 1);
      }
      .flex {
        width: 0;
      }
      /* 输入框样式 */
      .van-field__body {
        width: 4.76rem;
        height: 100%;
      }
      .van-field__control {
        height: 0.4rem;
        min-height: 0 !important;
        font-size: 0.28rem !important;
        color: rgba(153, 153, 153, 1);
      }
      .pay-total-price {
        margin: 0.2rem 0;
      }
      .pay-total-money {
        font-weight: bold;
        color: rgba(254, 80, 79, 1);
      }

      .page-bottom {
        height: 0.98rem;
        font-size: 0.3rem;
        font-weight: bold;
        box-shadow: 0 0 0.2rem 0 rgba(200, 200, 200, 0.5);
      }
      .pay-go-pay-btn {
        height: 100%;
      }
      .pay-bottom {
        height: 100%;
        padding-left: 0.3rem;
      }
      .pay-money {
        font-size: 0.32rem;
        font-weight: bold;
        color: rgba(254, 80, 79, 1);
      }
      .van-button {
        height: 100%;
        width: 2.7rem;
        font-size: 0.28rem;
        font-weight: normal;
      }
      .van-button span {
        display: flex;
        align-items: center;
        justify-content: space-around;
        line-height: normal !important;
      }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>
      <!-- ************************ 头 *************************** -->
      <div class="page-top">
        <div class="page-top">
          <div class="flex-wrap flex-justify-between flex-center-wrap header">
            <div class="header-row" @click="goBack">
              <img
                class="header-row-img"
                src="../../common/image/back.png"
                alt=""
              />
            </div>
            <div class="flex header-title">确认订单</div>
            <div class="header-right"></div>
          </div>
        </div>
      </div>
      <!-- ************************* 内容 *********************** -->
      <div class="page-content">
        <div class="placeholder"></div>
        <div class="pay-details">
          <div class="pay-details-title">商品详情</div>
          <div class="pay-details-course-name">
            【{{ orderDetails.coursetypename }}】{{ orderDetails.coursetitle }}
          </div>
          <div
            class="flex-wrap flex-justify-between flex-center-wrap pay-details-product"
          >
            <div class="pay-details-money">
              <span class="pay-money-icon">￥</span>{{ orderDetails.needpay }}
            </div>
            <div class="pay-details-nummmm-icon">
              x &nbsp;<span class="pay-product-num">1</span>
            </div>
          </div>
        </div>
        <div class="pay-order-details">
          <div class="flex-wrap">
            <div class="pay-remarks">订单备注：</div>
            <div class="flex">
              <van-cell-group>
                <van-field
                  v-model="fieldValue"
                  @focus="fieldFocus"
                  @blur="fieldBlur"
                />
              </van-cell-group>
            </div>
          </div>
          <div
            class="flex-wrap flex-justify-between flex-center-wrap pay-total-price"
          >
            <div>商品总价</div>
            <div>￥{{ orderDetails.needpay }}</div>
          </div>
          <div class="flex-wrap flex-justify-between flex-center-wrap">
            <div>共计</div>
            <div class="pay-total-money">￥{{ orderDetails.needpay }}</div>
          </div>
        </div>
      </div>
      <div class="page-bottom">
        <div class="flex-wrap flex-justify-between flex-center-wrap pay-bottom">
          <div>
            应付：<span class="pay-money">￥{{ orderDetails.needpay }}</span>
          </div>
          <div class="pay-go-pay-btn">
            <van-button
              @click="goToPay(orderDetails.orderid)"
              type="default"
              :disabled="canClick"
              color="#DE2A20"
              >支付</van-button
            >
          </div>
        </div>
      </div>
    </div>

    <script src="../../common/js/common.js"></script>
    <script src="../../common/js/vue.min.js"></script>
    <script src="../../common/js/vant.min.js"></script>
    <script src="../../common/js/http.js"></script>
    <script src="../../widget/service/user.service.js"></script>
    <script src="../../common/js/utils.js"></script>
    <script>
      // 注册 Lazyload 组件
      Vue.use(vant.Lazyload)
      // 注册 Field 组件
      Vue.use(vant.Field)
      // 注册 Button 组件
      Vue.use(vant.Button)
      Vue.use(vant.Toast)
      new Vue({
        el: '#app',
        components: {},
        data: {
          fieldValue: '请填写备注！',
          orderDetails: {},
          canClick: false,
          isAndroid: false
        },
        computed: {},
        methods: {
          //  返回按钮
          goBack() {
            window.history.back(-1)
          },
          // 去支付
          goToPay(orderid) {
            const $this = this
            this.canClick = true
            let remark = ''
            // 先将备注信息发送给服务器
            if (this.fieldValue !== '请填写备注！') {
              remark = this.fieldValue
            }
            const remarkObj = {
              orderid: orderid,
              remark: remark
            }
            userService.sendRemaksInfo(remarkObj).then(res => {
              // 添加备注信息成功过后才执行
              if (!res.code) {
                userService.getPayNeedInof({ orderid: orderid }).then(res3 => {
                  if (!res3.code) {
                    const launchid = res3.launchid
                    const payRequest = res3.payRequest
                    function onBridgeReady() {
                      WeixinJSBridge.invoke(
                        'getBrandWCPayRequest',
                        payRequest,
                        function(res2) {
                          // 支付成功后
                          if (res2.err_msg == 'get_brand_wcpay_request:ok') {
                            // 向后台再次确认是否支付成功
                            userService
                              .confirmPaySuccess({ launchid })
                              .then(res1 => {
                                if (!res1.code) {
                                  window.location.href = './order.html'
                                } else {
                                  $this.$toast('支付失败')
                                  $this.canClick = false
                                }
                              })
                          } else {
                            userService
                              .confirmPaySuccess({ launchid })
                              .then(res4 => {
                                if (!res4.code) {
                                  window.location.href = './order.html'
                                } else {
                                  $this.$toast('支付已取消')
                                  $this.canClick = false
                                }
                              })
                          }
                        }
                      )
                    }
                    if (typeof WeixinJSBridge == 'undefined') {
                      if (document.addEventListener) {
                        document.addEventListener(
                          'WeixinJSBridgeReady',
                          onBridgeReady,
                          false
                        )
                      } else if (document.attachEvent) {
                        document.attachEvent(
                          'WeixinJSBridgeReady',
                          onBridgeReady
                        )
                        document.attachEvent(
                          'onWeixinJSBridgeReady',
                          onBridgeReady
                        )
                      }
                    } else {
                      onBridgeReady()
                    }
                  } else {
                    this.$toast(`${res3.message}`)
                    this.canClick = false
                  }
                })
              } else {
                this.$toast(`${res.message}`)
                this.canClick = false
              }
            })
          },
          fieldFocus() {
            if (this.fieldValue === '请填写备注！') {
              this.fieldValue = ''
            }
          },
          fieldBlur() {
            if (this.fieldValue === '') {
              this.fieldValue = '请填写备注！'
            }
          }
        },
        created() {
          const queryObj = utils.getQuery(location.href)
          userService
            .getOrderDetails({ orderid: queryObj.orderid })
            .then(res => {
              this.orderDetails = res
              if (res.remark) {
                this.fieldValue = res.remark
              }
            })

          // function isAndroid(){
          //   var ua = navigator.userAgent.toLowerCase();
          //   if (ua.match(/android/i) == "android") {
          //     return true;
          //   } else {
          //     return false;
          //   }
          // }
          // if(isAndroid()){
          //    this.isAndroid = true
          // }
        }
      })
    </script>
  </body>
</html>
